<template>
    <div class="eqEvent">
        <!-- app界面btn批量操作抽屉 -->
        <el-drawer class="drawerAppHeader" size="80%" :visible.sync="drawerAppHeader" direction="btt" :before-close="closeDrawerAppHeader" :show-close='false'>
            <div class="header" slot="title">
                <i @click="closeDrawerAppHeader()" class="iconfont icon-gw-icon-fanghui"></i>
                <span>{{$t('eqEvent.appHeader[4]')}}</span>
                <el-button type='primary' @click="searchEvt(false)">{{$t('eqEvent.cx')}}</el-button>
            </div>
            <div class="select-box">
                <p>{{$t('eqEvent.mainHeader.typeNm')}}</p>
                <el-select v-model="eventType" :placeholder="$t('eqEvent.appHeader[2]')" @change="changeTypeList">
                    <el-option v-for="(item, index) in eventTypeList" :key="index" :label="$t(item.name)" :value="item.type">
                    </el-option>
                </el-select>
            </div>
            <div class="calendar">
                <p>{{$t('eqEvent.appHeader[0]')}}</p>
                <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="appStartTime" v-model="appStartTimeValue" type="datetime" :placeholder="$t('eqEvent.appHeader[3]')">
                </el-date-picker>
                <p>{{$t('eqEvent.appHeader[1]')}}</p>
                <el-date-picker default-time="[23:59:59]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="appEndTime" v-model="appEndTimeValue" type="datetime" :placeholder="$t('eqEvent.appHeader[3]')">
                </el-date-picker>
            </div>
        </el-drawer>

        <div class="left pcShow">
            <div class="title">
                <p>{{$t('eqEvent.leftHeaderTitle')}}</p>
                <el-input v-model="scout" :placeholder="$t('eqEvent.inputSearchEquip')" @input="scoutEq" @change='inputChange' clearable>
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>

            <div class="equipList_main" v-loading="nodeLoad">
                <span v-if="!equipList" class="promptResults">{{$t('publics.noData')}}</span>
                <dynamicMenu :dataList="equipList" :selectedMode="0" :isCloseStatus="true"></dynamicMenu>
            </div>
        </div>
        <div class="left appShow" id="eqTableAppHeight">
            <div class="title">
                <p>
                    <span>{{$t('eqEvent.mainHeader.leftTitle')}}</span>
                    <!-- <el-button type="primary" @click="onQuery()" class="nextBtn pcHidden" size="mini"><i class="iconfont iconsousuoL"></i>{{$t('eqEvent.cx')}}</el-button> -->
                    <i @click="onQuery()" class="iconfont icon-gw-icon-shaixuan"></i>
                </p>
                <el-input v-model="scout" :placeholder="$t('eqEvent.appHeader[5]')" @input="inputChange" clearable>
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>

            <div class="equipList_main" v-loading="nodeLoad">
                <span v-if="!equipList" class="promptResults">{{$t('publics.noData')}}</span>
                <dynamicMenu :dataList="equipList" :selectedMode="0" :isCloseStatus="true"></dynamicMenu>
            </div>
        </div>

        <div class="right pcShow">
            <div class="rightTitle">
                <span class="leftName">{{$t('eqEvent.mainHeader.leftTitle')}} · {{evtSum}}</span>

                <div class="select-box">
                    <span>{{$t('eqEvent.mainHeader.typeNm')}}</span>
                    <el-select v-model="eventType" :placeholder="$t('eqEvent.appHeader[2]')" @change="changeTypeList">
                        <el-option v-for="(item, index) in eventTypeList" :key="index" :label="$t(item.name)" :value="item.type">
                        </el-option>
                    </el-select>
                </div>
                <div class="calendar">
                    <el-date-picker @change="checkTime" v-model="searchTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00','23:59:59']" :range-separator="$t('eqEvent.z')" :start-placeholder="$t('eqEvent.appHeader[3]')" :picker-options="pickerOptions" :end-placeholder="$t('eqEvent.appHeader[3]')"></el-date-picker>
                </div>
                <el-button id="search" type="primary" @click="searchEvt(true)">
                    <i class="iconfont iconsousuoL"></i>
                    {{$t('eqEvent.cx')}}
                </el-button>
            </div>
            <div id="eqTable">
                <el-table :data="tableData" v-loading="tbLoad" :height="tableHeight" border id="table" ref="multipleTable" style="width: 100%">
                    <el-table-column prop="time" :label="$t('eqEvent.mainCenter.time')" width="200"></el-table-column>
                    <el-table-column prop="equip_no" :label="$t('eqEvent.mainCenter.equipNo')"></el-table-column>
                    <el-table-column prop="equip_nm" :show-overflow-tooltip='true' width="130" :label="$t('eqEvent.mainCenter.equipName')"></el-table-column>
                    <el-table-column :show-overflow-tooltip='true' :width="180" prop="event" :label="$t('eqEvent.mainCenter.equipEvent')"></el-table-column>
                    <el-table-column prop="alarmlevel" :label="$t('eqEvent.mainCenter.level')"></el-table-column>
                    <!-- <el-table-column prop="-" :label="$t('eqEvent.mainCenter.loc')"></el-table-column> -->
                    <!-- <el-table-column prop="-" :label="$t('eqEvent.mainCenter.replay')"></el-table-column> -->
                    <!-- <el-table-column prop="asset" :label="$t('eqEvent.mainCenter.asset')" :min-width="150"></el-table-column> -->
                    <el-table-column prop="planNo" :label="$t('eqEvent.mainCenter.plan')"></el-table-column>
                    <el-table-column prop="confirmname" :label="$t('eqEvent.mainCenter.confirmor')"></el-table-column>
                    <el-table-column prop="confirmtime" :label="$t('eqEvent.mainCenter.confirmTime')" width="200">
                    </el-table-column>
                    <el-table-column prop="confirmremark" :min-width="180" :label="$t('eqEvent.mainCenter.confirmRemarks')" :show-overflow-tooltip='true'>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination small background @size-change="handleSizeChange2" ref="pagination" @current-change="handleCurrentChange2" :pager-count="7" :page-sizes="[20, 50, 100]" :page-size="recordPage.pageSize" :current-page="recordPage.pageNo" layout="sizes, prev, pager, next, jumper" :total="recordPage.total"></el-pagination>
            </div>
        </div>

        <div class="right result-app-list appShow" v-if="mainAppShow">
            <div class="rightTitle">
                <span class=""><i @click="getBack()" class="iconfont icon-gw-icon-fanghui"></i>{{$t('eqEvent.appHeader[6]')}}</span>
                <!-- <el-button type="primary" @click="getBack()" class="nextBtn pcHidden" size="mini">返回</el-button> -->
            </div>
            <div id="eqTableApp">
                <el-table :data="tableData" :height="tableHeightApp" id="table" ref="multipleTable" style="width: 100%">
                    <el-table-column prop="time" :label="$t('eqEvent.mainCenter.time')" width="200"></el-table-column>
                    <el-table-column prop="equip_no" :label="$t('eqEvent.mainCenter.equipNo')"></el-table-column>
                    <el-table-column prop="equip_nm" :show-overflow-tooltip='true' width="150" :label="$t('eqEvent.mainCenter.equipName')"></el-table-column>
                    <el-table-column :show-overflow-tooltip='true' :width="180" prop="event" :label="$t('eqEvent.mainCenter.equipEvent')"></el-table-column>
                    <el-table-column prop="alarmlevel" :label="$t('eqEvent.mainCenter.level')"></el-table-column>
                    <!-- <el-table-column prop="location" :label="$t('eqEvent.mainCenter.loc')"></el-table-column> -->
                    <!-- <el-table-column prop="related_video" :label="$t('eqEvent.mainCenter.replay')"></el-table-column> -->
                    <!-- <el-table-column prop="ziChanName" :label="$t('eqEvent.mainCenter.asset')" :min-width="150"></el-table-column> -->
                    <el-table-column prop="ziChanName" :label="$t('eqEvent.mainCenter.plan')"></el-table-column>
                    <el-table-column prop="confirmname" :label="$t('eqEvent.mainCenter.confirmor')"></el-table-column>
                    <el-table-column prop="confirmtime" :label="$t('eqEvent.mainCenter.confirmTime')" width="200">
                    </el-table-column>
                    <el-table-column prop="confirmremark" :min-width="180" :label="$t('eqEvent.mainCenter.confirmRemarks')"></el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination small background @current-change="handleCurrentChange2" :pager-count="7" layout="prev, pager, next" :total="recordPage.total" ref="pagination"></el-pagination>
            </div>
        </div>

    </div>
</template>
<script>
import eqEvent from './js/eqEvent.js';
export default eqEvent;
</script>
<style scoped lang="scss" src="./css/eqEvent.scss"></style>